<!--
*@Author: QWP
*@Description: 过渡页的 header
*@Date: 2023-06-19 17:46:21
-->
<template>
  <a-layout-header :style="headerStyle">
    <a-flex gap="middle" horizontal justify="space-between" align="center" flex="1">
      <a-flex horizontal align="center">
        <div v-if="showCollapse">
          <MenuUnfoldOutlined :style="collapseIconStyle" v-if="expand" @click="setCollapse" />
          <MenuFoldOutlined :style="collapseIconStyle" v-else @click="setCollapse" />
        </div>
        <a-menu mode="horizontal" theme="dark" :style="{ backgroundColor: headerStyle.backgroundColor }"
          :items="headerMenuTypes" v-bind="$attrs" class="u-index-top-menu f-margin-l30"></a-menu>
      </a-flex>
      <slot></slot>
      <a-flex horizontal align="center" style="overflow-x: auto">
        <a-space :size="30" align="center">
          <!-- 天气 -->
          <a-popover placement="topLeft" 
            :overlayInnerStyle="{ borderRadius: '10px', padding: '10px', overflow: 'hidden' }">
            <template #content>
              <WeatherPage  ref="weatherRef" :isCard="true" @click="toWeather" />
            </template>
            <div class="f-flex-row">
              <template v-if="dayWeather['wea_img']">
                <u-icon-font :type="whetherImg[dayWeather['wea_img']]" style="font-size: 26px; color: #fff" />
              </template>
              <span style="margin-left: 4px; color: #fff">{{ dayWeather['tem'] }}℃</span>
            </div>
          </a-popover>

          <a-badge :count="99" :dot="true" :offset="[4, -2]">
            <FileProtectOutlined style="color: #fff; font-size: 20px; cursor: pointer" title="政策文件"
              @click="toPolicyFile" />
          </a-badge>

          <!-- <BellOutlined style="color: #fff; font-size: 20px; cursor: pointer" 
            title="部门通知"
            @click="emits('noticeClick')"/> -->
          <!-- yingjirukou -->
          <!-- <BellOutlined style="color: #fff; font-size: 20px; cursor: pointer" title="应急预警"
            @click="emits('emergency')" /> -->

          <u-icon-font type="icon-yingjirukou" style="color: #fff; font-size: 20px; cursor: pointer" title="应急发布"
            @click="emits('emergency')" />

          <TopDropMenu @click="(data) => emits('dropClick', data)" />
        </a-space>
      </a-flex>
    </a-flex>

    <!-- 用于获取天气数据 -->
    <WeatherPage :isCard="true" ref="weatherRef" style="display: none" @success="getEWeatherData" />
  </a-layout-header>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, watch, h, onMounted } from 'vue'
import { useHomeStore, useEmergencyStore, useLoginStore, useOtherStore } from '@/store'
import { useRouter } from 'vue-router'
import TopDropMenu from './TopDropMenu.vue';
import NoticeMsg from './notice/Notice.vue'
import { urlFile } from '@/util/common'
import type { CSSProperties } from 'vue';
import { getColor, levMainColor } from '@/views/index/emergencyIndex/data'
import UIconFont from '@/components/common/iconfont/IconFont.vue'
import { Space } from 'ant-design-vue';
import { storeToRefs } from 'pinia';
import { headerMenuTypes } from '@/common/model/const';
import WeatherPage from '@/views/oa/assist/weather/Index.vue'

const props = withDefaults(
  defineProps<{
    showCollapse?: boolean
  }>(),
  {
    showCollapse: true
  }
)

const homeStore = useHomeStore();
const otherStore = useOtherStore();
const { expand } = storeToRefs(homeStore);
const { level } = storeToRefs(useEmergencyStore());
const { userInfo } = storeToRefs(useLoginStore());
const router = useRouter();

const emits = defineEmits(['dropClick', 'noticeClick', 'emergency'])

const logo = urlFile('logo.png')

const whetherImg = ref({})
const dayWeather = ref({})
const weatherRef = ref(null)
const getEWeatherData = (data) => {
  whetherImg.value = weatherRef.value.whetherImg;
  dayWeather.value = data;
}
const toWeather = () => {
  router.push({
    path: '/TransitIndex/WeatherInfo',
    query: {
      _tab: '1',
      label: '天气信息'
    }
  })
}

// 折叠图标的样式
const collapseIconStyle: CSSProperties = {
  color: "#fff",
  fontSize: '20px',
  cursor: 'pointer'
}

// 头部header样式
const headerStyle: CSSProperties = reactive({
  height: '56px',
  padding: '0 ',
  lineHeight: '56px',
  backgroundColor: 'rgb(0, 21, 42)',
});

watch(() => level, (nval, oval) => {
  let levelColor = getColor(nval)
  // headerStyle.backgroundColor = levelColor.headerBgColor
}, { immediate: true })

// 获取用户信息
const getUserName = () => {
  const userInfo = userInfo;
  if (userInfo['name']) {
    return userInfo['name'];
  }
}

// 设置侧边栏的折叠状态
const setCollapse = () => {
  homeStore.setExpand()
}

// 跳转到政策文件
// /TransitIndex/KnowledgeStore
// const toPolicyFile = () => router.push({ path: '/TransitIndex/PolicyFile' })
const toPolicyFile = () => {
  otherStore.setParams({ name: '法律法规', type: '1' })
  router.push({
    path: '/TransitIndex/KnowledgeStore',
    query: {
      _tab: '1',
      label: '知识库'
    }
  })
}

</script>

<style lang='scss' scoped>
.u-transit-header {
  font-size: 22px;
  font-family: "PingFang SC-Bold, PingFang SC";
  font-weight: 400;
  color: #333333;
}

:deep(.u-index-top-menu) {
  .ant-menu-item {
    // top: -8px !important;
    display: inline-block;
    height: 40px;
    line-height: 40px;
  }

  .ant-menu-item-selected {
    border-radius: 4px;
  }
}
</style>